<template>
  <div class="ranking">
  	
  	
  	
		<x-header :left-options="{backText: ''}">星级排名</x-header>		
		<!--数据加载动画 start-->
		<div class="loadingBox" v-show="status == 0">
			<div class="loading">
				<div>loading..</div>
				<div></div>
				<div></div>
			</div>
		</div>
		<!--数据加载动画 end-->

		<!--加载完成 start-->
  	<div class="loadingOver" v-show="status == 1">
			<div class="tabBox">
				<tab>
		      <tab-item selected @on-item-click="onItemClick">星级党员</tab-item>
		      <tab-item @on-item-click="onItemClick">星级支部</tab-item>
		    </tab>
			</div>
			<div class="listBox">
				<div class="listBox-rankingTitle">
					<div class="listBox-rankingTitleName">名称</div>
					<div class="listBox-rankingTitleLevel">分数</div>
					<div class="listBox-rankingTitleNum">排名</div>
					<div class="clear"></div>
				</div>
				<ul class="anounce-listContent" v-show="index == 0">
					<li class="rankingList" v-for="rankingList in partyMemberForm">
						<router-link to="" class="routerLink">
							<div class="rankingList-name" v-text="rankingList.KHUserName || '-'"></div>
							<div class="rankingList-level" v-text="rankingList.totalPoint || '-'"></div>
							<div class="rankingList-num" v-text="rankingList.Ranking || '-'"></div>
							<div class="clear"></div>
							</router-link>
					</li>			
					<li class="loadingMore" @click="partyMemberFormMore" v-text="partyMemberFormMoreText"></li>
				</ul>
				
				<ul class="anounce-listContent" v-show="index == 1">
					<li class="rankingList" v-for="rankingList in branchForm">
						<router-link to="" class="routerLink">
							<div class="rankingList-name" v-text="rankingList.DeptName  || '-'"></div>
							<div class="rankingList-level" v-text="rankingList.totalPoint || '-'"></div>
							<div class="rankingList-num" v-text="rankingList.Ranking || '-'"></div>
							<div class="clear"></div>
							</router-link>
					</li>			
					<li class="loadingMore" @click="branchFormMore" v-text="branchFormMoreText"></li>
				</ul>
			</div>
		</div>
		<!--加载完成 end-->
		
		
	</div>
</template>

<script>
import Api from 'assets/js/api';
import init from '../assets/js/init';
import { XHeader, Actionsheet, TransferDom } from 'vux'
import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from 'vux'

var api = new Api();
var result = localStorage.getItem('result');
export default {
  name: 'notice',
  data () {
    return {
    	status:'0',//默认加载状态为0
    	index:0,//默认tab栏为第一个
     	partyMemberForm:[],//接收星级党员
     	partyMemberFormLength:'',//星级党员总数
     	partyMemberFormPage:1,//初始默认partyMemberForm为加载第一页，往后每点击一次加载更多则增加一页
     	partyMemberFormMoreText:'点击加载更多',
     	branchForm:[],//接收星级支部
     	branchFormLength:'',//星级支部总数
    	branchFormPage:1,//初始默认branchForm为加载第一页，往后每点击一次加载更多则增加一页
    	branchFormMoreText:'点击加载更多'
    }
  },
  created(){
  	var self = this;
		console.log(result);
		api.get(api.url.ranking,{ 
			params:{
				Action: 'RYKH_GETRYKHLIST',
				p: 1,
				pagecount: 8,
				P1:'1728',
				szhlcode: result
			}
		}).then(response=>{ 
			console.log(response);
			this.partyMemberForm = response.data.Result;
			this.partyMemberFormLength = response.data.Result2;
			if(response.status == 200){
				this.status = 1;
			}
		}).catch(err=>{ 
			console.log(err) 
		})
  },
  methods:{
  	onItemClick (index) {
  		var self = this;
      this.index = index;
      if(this.index == 0){
      	/*if(self.partyMemberForm.length == 0){*/
      		api.get(api.url.ranking,{ 
						params:{
							Action: 'RYKH_GETRYKHLIST',
							p: 1,
							pagecount: 8,
							P1:'1728',
							szhlcode: result
						}
					}).then(result=>{ 
						console.log(result);
						this.partyMemberForm = result.data.Result;
					}).catch(err=>{ 
						console.log(err) 
					})
      	/*}*/
      }
      if(this.index == 1){
      	/*if(self.branchForm.length == 0){*/
      		this.status = 0;
      		api.get(api.url.ranking,{ 
						params:{
							Action: 'ZBKH_GETZBKHLIST',
							p: 1,
							pagecount: 8,
							P1:'1728',
							szhlcode: result
						}
					}).then(response=>{ 
						console.log(response);
						this.branchForm = response.data.Result;
						this.branchFormLength = response.data.Result2;
						if(response.status == 200){
							this.status = 1;
						}
					}).catch(err=>{ 
						console.log(err) 
					})
      	/*}*/
      }
    },
    partyMemberFormMore(){
    	this.partyMemberFormPage += 1;
			var self = this;
			this.partyMemberFormMoreText = '正在加载中···';
			api.get(api.url.index,{ 
				params:{
					Action: 'RYKH_GETRYKHLIST',
					p: self.partyMemberFormPage,
					pagecount: (self.partyMemberFormLength - self.partyMemberFormPage*8) > 0 ? 8 : 8 - Math.abs(self.partyMemberFormLength - self.partyMemberFormPage*8),
					P1:'1728',
					szhlcode: result
				}
			}).then(result=>{ 
				console.log(result)
				self.partyMemberForm = self.partyMemberForm.concat(result.data.Result);
				this.partyMemberFormMoreText = '点击加载更多';
			}).catch(err=>{ 
				console.log(err);
				this.partyMemberFormMoreText = '点击加载更多';
			});
			if(this.partyMemberForm.length == this.branchFormLength){
				this.partyMemberFormMoreText = '信息已经更新为最新的了！';
			}
    },
    branchFormMore(){
    	this.branchFormPage += 1;
    	console.log();
			var self = this;
			this.branchFormMoreText = '正在加载中···';
			api.get(api.url.index,{ 
				params:{
					Action: 'RYKH_GETRYKHLIST',
					p: self.branchFormPage,
					pagecount: (self.branchFormLength - self.branchFormPage * 8) > 0 ? 8 : 8 - Math.abs(self.branchFormLength - self.branchFormPage*8),
					P1:'1728',
					szhlcode: result
				}
			}).then(result=>{ 
				console.log(result)
				self.branchForm = self.branchForm.concat(result.data.Result);
				this.branchFormMoreText = '点击加载更多';
			}).catch(err=>{ 
				console.log(err);
				this.branchFormMoreText = '点击加载更多';
			});
			if(this.branchForm.length == this.branchFormLength){
				this.branchFormMoreText = '信息已经更新为最新的了！';
			}
    },
  },
  components:{
  	XHeader,
    Actionsheet,
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("../assets/css/common.css");
	.ranking{
		width: 100%;
		height: 100%;
	}
	.vux-header{
		background-color: #f00 !important;
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 2000;
		width: 100%;
	}
	
	.vux-tab{
		padding-top: 40px;
	}
	
	.vux-tab .vux-tab-item.vux-tab-selected{
		color: #f00 !important;
    border-bottom: 3px solid #f00 !important;
	}
	.vux-tab-ink-bar{
		background-color: #f00 !important;	
	}
	
	.vux-header .vux-header-left .left-arrow:before{
		border: 2px solid #fff !important;
    border-width: 2px 0 0 2px !important;
	}
	
	.listBox{
		width: 100%;
		min-height: 8.5rem;
		box-sizing: border-box;
		padding: 0 1rem;
		margin-top: 0.5rem;
		background-color: #fff;
		border-top: 1px solid transparent;
		padding-bottom: 3rem;
	}
	.listBox-rankingTitle{
		width: 100%;
		height: 2rem;
		line-height: 1rem;
		border-bottom: 1px solid #e9e9e9;
	}
	.listBox-rankingTitleName,.listBox-rankingTitleLevel,.listBox-rankingTitleNum{
		float: left;
		width: 33.33%;
		text-align: center;
		font-size: 0.65rem;
		color: #333;
		line-height: 2rem;
	}
	.anounce-listContent{
		width: 100%;
		box-sizing: border-box;
	}
	.rankingList{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid #e9e9e9;
		padding: 0.3rem 0;
	}
	.rankingList-name{
		width: 33.33%;
		font-size: 0.6rem;
		color: #333;
		text-align: center;
		float: left;
		white-space:nowrap; 
		overflow:hidden; 
		text-overflow:ellipsis;
	}
	.rankingList-level{
		width: 33.33%;
		font-size: 0.6rem;
		color: #333;
		text-align: center;
		float: left;
	}
	.rankingList-num{
		width: 33.33%;
		font-size: 0.6rem;
		color: #333;
		text-align: center;
		float: left;
	}
	.routerLink{
		display: block;
	}
	.loadingMore{
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
	}
	.loadingMore{
		font-size: 0.7rem;
	}
	
	/*加载动画*/
	.loadingBox{
		width: 100%;
		height: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.loading {
	    border-radius: 50%;
	    font-size: 20px;
	    height: 100px;
	    line-height: 90px;
	    position: relative;
	    text-align: center;
	    width: 100px;
	}
	.loading > div:nth-child(2) {
	    border-color: #FFF;
	    left: 0px;
	    width: 90px;
	}
	.loading > div:nth-child(3) {
	    border-color: #009933;
	    left: -5px;
	    width: 100px;
	    -webkit-animation-delay: 0.5s;
	    -moz-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	    -o-animation-delay: 0.5s;
	    animation-delay: 0.5s;
	}
	.loading > div:nth-child(2), .loading > div:nth-child(3) {
	    background-color: rgba(255, 255, 255, 0.2);
	    border: 5px solid #FFF;
	    border-radius: 50%;
	    box-shadow: 0 0 5px 0 #f00;
	    height: 100px;
	    position: absolute;
	    top: 0px;
	    border-top-width: 0;
	    border-bottom-width: 0;
	    -webkit-animation: anim3 2s linear infinite;
	    -moz-animation: anim3 2s linear infinite;
	    -ms-animation: anim3 2s linear infinite;
	    -o-animation: anim3 2s linear infinite;
	    animation: anim3 2s linear infinite;
	}
	@keyframes anim3{
		0% {
		    transform: rotateY(0deg);
		}
		50% {
		    transform: rotateY(180deg);
		}
		100% {
		    transform: rotateY(360deg);
		}
	}
</style>
